<template>
  <div class="content">
    <van-nav-bar title="搜索" left-arrow @click-left="$router.push('/')" />
    <div class="search">
      <van-field
        v-model="keyword"
        center
        clearable
        placeholder="请输入商家或美食名称"
        @input="changeinput"
      >
        <template #button>
          <van-button size="small" type="info" @click="changeAgree"
            >提交</van-button
          >
        </template>
      </van-field>
    </div>
    <div class="history" v-if="isShow && history.length != 0">
      <div class="name">搜索历史</div>
      <van-cell v-for="(item, index) in history" :key="index">
        <template #title>
          <div @click="toSearch(index)">{{ item }}</div>
        </template>
        <template #right-icon>
          <van-icon name="cross" @click="oneclear(index)" />
        </template>
      </van-cell>
      <div class="clearhistory" @click="clearAllFn">清空搜索历史</div>
    </div>
    <div class="nohistory" v-if="isSearch">很抱歉！无搜索结果</div>
    <div class="agree" v-if="!isShow && agree.length != 0">
      <div class="name">商家</div>
      <div class="orderimg" v-for="(item, index) in agree" :key="index">
        <img :src="baseurl + item.image_path" alt="" />
        <div class="info">
          <div class="infoname">{{ item.name }}<span>支付</span></div>
          <div class="order">月售{{ item.recent_order_num }}单</div>
          <div class="money">20元起送 / 距离{{ item.distance }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { search } from "@/api/search.js";
export default {
  data() {
    return {
      agree: [],
      baseurl: "//elm.cangdu.org/img/",
      keyword: "",
      isShow: true,
      history: JSON.parse(localStorage.getItem("searchHistory")) || [],
      isSearch: false,
    };
  },
  created() {},
  methods: {
    resue(geohash, keyword) {
      search({ geohash, keyword }).then((res) => {
        console.log(res);
        this.agree = res.data;
        if (this.agree.length == 0) {
          this.isSearch = true;
        } else {
          this.isSearch = false;
        }
      });
    },
    changeAgree() {
      this.isShow = false;
      this.agree = [];
      if (!this.keyword) {
        this.$toast.fail("关键字不能为空");
        this.isShow = true;
        return;
      }
      console.log(this.keyword);
      let geohash = "23.126101,113.427383";
      if (this.history.indexOf(this.keyword) == -1) {
        this.history.push(this.keyword);
        localStorage.setItem("searchHistory", JSON.stringify(this.history));
      }
      /* search({ geohash, keyword: this.keyword }).then((res) => {
        console.log(res);
        this.agree = res.data;
        if (this.agree.length == 0) {
          this.isSearch = true;
        } else {
          this.isSearch = false;
        }
      }); */
      this.resue(geohash, this.keyword);
    },
    changeinput() {
      if (!this.keyword) {
        this.isShow = true;
        this.isSearch = false;
      }
    },
    clearAllFn() {
      localStorage.removeItem("searchHistory");
      this.history = [];
    },
    oneclear(index) {
      this.history.splice(index, 1);
    },
    toSearch(index) {
      this.isShow = false;
      let geohash = "23.126101,113.427383";
      let keyword = this.history[index];
      this.keyword = keyword;
      this.resue(geohash, keyword);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3190e8;
  border-bottom: 1px solid #d4d3d3;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
/deep/.van-field__control {
  padding-left: 5px;
  height: 35px;
  background-color: #f5f5f5;
}
/deep/.van-field__button {
  width: 80px;
  .van-button--small {
    width: 80px;
  }
}
.history {
  .name {
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
  }
  .van-cell {
    border-bottom: 1px solid #ccc;
  }
  .van-icon {
    line-height: 24px;
  }
  .clearhistory {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    color: #3190e8;
    text-align: center;
    font-weight: 700;
  }
}
.nohistory {
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  text-align: center;
  border-top: 1px solid #ccc;
}
.agree {
  .name {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    font-weight: 10px;
  }
  .orderimg {
    height: 80px;
    background-color: #fff;
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    img {
      height: 50px;
      width: 50px;
    }
    .info {
      display: flex;
      flex: 1;
      flex-direction: column;
      height: 70px;
      justify-content: space-around;
      font-size: 12px;
      border-bottom: 1px solid #ccc;
      margin-left: 10px;
      .money {
        margin-bottom: 5px;
      }
    }
  }
}
</style>